<template>

  <el-menu :unique-opened=true
           :default-active="currentIndex"
           :default-openeds="currentOpen"
           :router=true
           @select="handleSelect">

    <template v-for="menu in menu_data">

      <el-menu-item v-if="!menu.children||menu.children.length===0"
                    :index="menu.index"
                    :key="menu.index"><div style="font-size:16px;">{{ menu.label }}</div>
      </el-menu-item>

      <el-submenu v-else
                  :index="menu.index"
                  :key="menu.index">

        <template slot="title">
          <div style="display: flex">
            <div style="font-size:16px;">{{ menu.label }}</div>

            <i
              v-show="menu.showHighlight"
              class="el-icon-warning"
              style="font-size:14px;line-height:56px;margin-left:8px;color: #ff1111"></i>
          </div>
        </template>
        <el-menu-item v-for="child in menu.children"
                      :index="child.index"
                      :key="child.index">
          <div style="display: flex">

            {{ child.label }}
            <i
              v-show="child.showHighlight"
              class="el-icon-warning"
              style="font-size:14px;line-height:50px;margin-left:8px;color: #ff1111"></i>
          </div>

          <!--{{ child.label }}-->
          <!--<i v-show="child.showHighlight"-->
             <!--class="el-icon-warning"-->
             <!--style="font-size:14px;line-height:16px;color: #ff1111"></i>-->

          <!--<span v-if="currentIndex===child.index">hahahah</span>-->
          <img class='img-tv' v-if="currentIndex!==child.index&&child.showTv"  @click='toTvPage(child.index)'  src="../../src/common/images/tv.png"/>
          <img class='img-tv' v-if="currentIndex===child.index&&child.showTv"  @click='toTvPage(child.index)'  src="../../src/common/images/tv-hover.png"/>

        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>

</template>
<script>

  export default {
    name: "menu-component",
    props: ['menu_data'],
    data() {
      return {
        currentIndex: '',
        currentOpen: []
      }
    },
    created: function () {
      this.initMenuIndex(this.$route.path)
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
    },
    methods: {

      toTvPage: function (path) {
//        let path = this.$route.path
        if (path.startsWith('/wrapper')) {
          path = path.substring(8)
          this.$router.push(path).catch(err => {})
        } else {
        }
        // window.open('/#'+path);
        console.log(this.$route)
//        console.log('/#/'+path)
      },

      handleSelect: function (key, keyPath) {
        this.$router.push("").catch(err => {})
        this.currentIndex = key

      },

      initMenuIndex:function (path) {

       // console.log('~~~~~~~~~~~~~~~~~~~~~~~~~')
       // console.log(path)
        switch (path) {
          case '/wrapper/programlist':
          case '/wrapper/scanlist':
            this.currentOpen.push('scan')
            this.currentIndex = '/wrapper/programlist?chanxian=' + this.$route.query.chanxian
            break;
          case '/wrapper/programfilelist':
            this.currentOpen.push('program')
            this.currentIndex = '/wrapper/programfilelist?chanxian=' + this.$route.query.chanxian
            break;
          case '/wrapper/bomlist':
            this.currentOpen.push('bomlist')
            this.currentIndex = '/wrapper/bomlist?chanxian=' + this.$route.query.chanxian
            break;
          case '/wrapper/speclib':
          case '/wrapper/clientlist':
            this.currentIndex = '/wrapper/clientlist'
            break;
          case '/wrapper/lineStatus':
            this.currentOpen.push('lineStatus')
            this.currentIndex = '/wrapper/lineStatus?chanxian=' + this.$route.query.chanxian
            break;
          case '/wrapper/lineBoard':
            this.currentOpen.push('lineStatus')
            this.currentIndex = '/wrapper/lineBoard'
            break;
          case '/wrapper/programSurplusList':
          case '/wrapper/surpluslist':
            this.currentOpen.push('remainQuantity')
            this.currentIndex = '/wrapper/programSurplusList?chanxian=' + this.$route.query.chanxian
            break;
          case '/wrapper/counterConfig':
            this.currentIndex = '/wrapper/counterConfig'
            break;
          case '/wrapper/user':
            this.currentIndex = '/wrapper/user'
            break;
          case '/aoiWrapper/aoiCheck':
            this.currentIndex = '/aoiWrapper/aoiCheck'
            break;
          case '/aoiWrapper/repairConfirm':
            this.currentIndex = '/aoiWrapper/repairConfirm'
            break;
        }
      }
    }
  }


</script>

<style scoped>
  .el-menu {
    background: rgb(238, 241, 246);
    height: 100%;
  }

  .img-tv{
    width:16px;
    height:16px;
    line-height: 36px;
    cursor: pointer;
    position: absolute;
    top:50%;
    right:16px;
    margin-top:-8px;


  }

</style>
